<template>
	<div class="train-teacher-test maxW">
		<div class="train-test seeOp fr">
<!-- 			<span >保存阅卷</span> -->
			<el-button type="primary" @click="saveTest()">保存阅卷</el-button>
			<!-- <el-button type="primary">提交并反馈</el-button> -->
		</div>

		<div class="crumbs-link">
			<router-link to="/train/index">培训列表</router-link>
			<router-link to="/train/manage/index"><i>></i>培训管理</router-link>
			<!-- <span @click="goback()"><i>></i>批阅</span> -->
			<router-link :to="{path: '/train/review', query: {trainid: testList.train_id, train_little_id: train_little_id,test_id:testList.test_id ,name:testList.name}}"><i>></i>批阅</router-link>
	
			<strong v-if="testList.name"><i>></i>{{testList.name}}{{testList.train_id}}</strong>
			<strong v-else><i>></i>批阅答题试卷</strong>
		</div>

		<div class="train-teacher-test-content">
			<div class="train-teacher-test-xx">
				<span>
					得分<i> {{ testList.scores }}</i>
				</span>
				<!-- <span>
					用时<em>-</em>
				</span> -->
			</div>

			<div class="train-teacher-test-title">
				<h3>{{testList.name}}</h3>
				<p v-if="testList.marks">满分{{testList.marks}}分</p>
			</div>


			<div class="train-teacher-test-cont">

				<el-form :model="ruleForm" ref="ruleForm" label-width="0" class="demo-ruleForm">

					<div class="train-teacher-test-radio" v-for="type in testList.question_type" :key="type.id" >
						<div class="train-teacher-test-subject">
							<i>{{type.cn_num}}. </i>
							<span>{{type.question_type}} </span>
							<em> ({{type.count}}题，共{{type.score}}分)</em>
						</div>

						<ul>
							<template  v-for="(item, index) in testList.question_list" v-if="parseInt(item.qt_id) === parseInt(type.id)">
								<li class="test-list" v-if="parseInt(item.qt_id) === 1 || parseInt(item.qt_id) === 2">
									<el-form-item prop="resource">
										<template v-if="item.pattern === 1">
											<div class="test-list-title clear">
												<i>{{index + 1}}.</i>
												<div class="content_vb fl"  v-html="item.content"></div>
												<strong>（{{item.score}}分</strong>
											</div>
										</template>
										<template v-if="item.pattern === 2">
											<div class="test-list-title clear">
												<i>{{index + 1}}.</i>
												<img :src="BASE_URL + item.content_path">
												<strong>（{{item.score}}分）</strong>
											</div>
										</template>
										<ul>
											<li class="test-list-option option-checked clear" v-for="(option,index) in item.option">
												<template v-if="!in_array( option.name, list[item.id].answer ) && item.answer != null && in_array( option.name, item.answer )">
													<el-checkbox 
													class="d" 
													disabled 
													:checked= 'true'
													:label="option.name">
													</el-checkbox>
													<div  v-html="option.value"></div>
												</template>
												<template v-else-if="item.answer != null && in_array( option.name, item.answer )">
													<el-checkbox 
													class="a" 
													disabled 
													:checked= 'true'
													:label="option.name">
													</el-checkbox>
													<div v-html="option.value"></div>
												</template>
												<template v-else-if="list[item.id].answer != null && !in_array( option.name, item.answer ) && in_array( option.name, list[item.id].answer )">
													<el-checkbox 
													class="b" 
													disabled 
													:checked= 'true'
													:label="option.name">
													</el-checkbox>
													<div  v-html="option.value"></div>
												</template>
												<template v-else>
													<el-checkbox  
													class="c"
													disabled 
													:label="option.name">
													</el-checkbox>
													<div v-html="option.value"></div>
												</template>	
											</li>
										</ul>
										<div class="train-teacher-test-checkpoint clear">

											<span>难度：{{item.difficulty}}</span>

											<div class="train-teacher-test-checkpoint-r fr">
												<el-popover
												  placement="bottom-end"
												  width="500"
												  popper-class="test-analysis"
												  trigger="hover">
													<ul class="r_analysis">
														<li class="clear">
															<span>答案</span>
															<div>
																<span v-for="answer in item.answer">{{answer}}</span>
															</div>
														</li>
														<li class="clear">
															<span>统计</span>
															<div>
																本题共被作答{{item.question_info.answer_count}}次，正确率为{{item.question_info.true_probability}}%
															</div>
														</li>
														<li class="i_analysis clear">
															<span>解析</span>
															<template v-if="item.pattern == 1">
																<div v-html="item.resolve"></div>
															</template>
															<template v-if="item.pattern == 2">
																<div>
																	<img :src="BASE_URL + item.resolve_path">
																</div>
															</template>
														</li>
													</ul>
													<i slot="reference">查看解析</i>
												</el-popover>
											</div>
										</div>
									</el-form-item>
								</li>

								<!-- 填空题 -->
								<li class="test-list list-title-line" v-else-if="parseInt(item.qt_id) === 3">
									<el-form-item prop="resource">
										<template v-if="item.pattern === 1">
											<div class="test-list-title clear">
												<i>{{index + 1}}.</i>
												<div class="content_vb fl"  v-html="item.content"></div>
												<strong class="fl">（{{item.score}}分）</strong>
											</div>
										</template>
										<template v-if="item.pattern === 2">
											<div class="test-list-title clear">
												<i>{{index + 1}}.</i>
												<img :src="BASE_URL + item.content_path">
												<strong>（{{item.score}}分）</strong>
											</div>
										</template>

										<el-form-item label-width="40px" label="答案" prop="completion" class="editorBox">
											<div class="answer_txt">
												<div v-html="list[item.id].answer[0]" v-if="list[item.id].answer[0]"></div>
												<p v-else>没有填写答案哦~</p>
											</div>
										</el-form-item>

										<el-form-item label="评分" label-width="60px" prop="completion" class="test-list-editor">
											<div>
												<el-input-number 
													class="i_grade"
													placeholder="请输入评分" 
													v-model="list[item.id].score" 
													controls-position="right"
													:controls='false'
													:min="0" :max="item.score">
												</el-input-number>
											</div>
										</el-form-item>

										<el-form-item label="评语" label-width="60px" prop="completion" class="test-list-editor">
											<div>
												<vue-editor 
													:editorToolbar="customToolbar"
													:id="'editor2'+ item.id" 
													
													v-model="list[item.id].comment" 
													placeholder="请输入评语">
												</vue-editor>
											</div>
										</el-form-item>

										<div class="train-teacher-test-checkpoint clear">

											<span>难度：{{item.difficulty}}</span>

											<div class="train-teacher-test-checkpoint-r fr">
												<el-popover
												  placement="bottom-end"
												  width="500"
												  popper-class="test-analysis"
												  trigger="hover">
													<ul class="r_analysis">
														<li class="clear">
															<span>答案</span>
															<div>
																<span v-for="answer in item.answer">{{answer}}</span>
															</div>
														</li>
														<li class="clear">
															<span>统计</span>
															<div>
																本题共被作答{{item.question_info.answer_count}}次，正确率为{{item.question_info.true_probability}}%
															</div>
														</li>
														<li class="i_analysis clear">
															<span>解析</span>
															<template v-if="item.pattern == 1">
																<div v-html="item.resolve"></div>
															</template>
															<template v-if="item.pattern == 2">
																<div>
																	<img :src="BASE_URL + item.resolve_path">
																</div>
															</template>
														</li>
													</ul>
													<i slot="reference">查看解析</i>
												</el-popover>
											</div>
										</div>
									</el-form-item>
								</li>
								<!-- 不是选择题 -->
								<li class="test-list list-title-line" v-else>
									<el-form-item prop="resource">
										<template v-if="item.pattern === 1">
											<div class="test-list-title clear">
												<i>{{index + 1}}.</i>
												<div class="content_vb fl"  v-html="item.content"></div>
												<strong class="fl">（{{item.score}}分）</strong>
											</div>
										</template>
										<template v-if="item.pattern === 2">
											<div class="test-list-title clear">
												<i>{{index + 1}}.</i>
												<img :src="BASE_URL + item.content_path">
												<strong>（{{item.score}}分）</strong>
											</div>
										</template>

										<el-form-item label="答案" label-width="60px" prop="completion" class="editorBox">
											<div class="answer_txt">
												<div v-html="list[item.id].answer[0]" v-if="list[item.id].answer[0]"></div>
												<p v-else>没有填写答案哦~</p>
											</div>
										</el-form-item>

										<el-form-item label="评分" label-width="60px" prop="completion" class="test-list-editor">
											<div>
												<el-input-number 
													class="i_grade"
													placeholder="请输入评分" 
													v-model="list[item.id].score" 
													controls-position="right"
													:controls='false'
													:min="0" :max="item.score">
												</el-input-number>
											</div>
										</el-form-item>

										<el-form-item label="评语" label-width="60px" prop="completion" class="test-list-editor">
											<div>
												<vue-editor 
													:editorToolbar="customToolbar"
													:id="'editor2'+ item.id" 
													
													v-model="list[item.id].comment" 
													placeholder="请输入评语">
												</vue-editor>
											</div>
										</el-form-item>

										<div class="train-teacher-test-checkpoint clear">

											<span>难度：{{item.difficulty}}</span>

											<div class="train-teacher-test-checkpoint-r fr">
												<el-popover
												  placement="bottom-end"
												  width="500"
												  popper-class="test-analysis"
												  trigger="hover">
													<ul class="r_analysis">
														<li class="clear">
															<span>答案</span>
															<div>
																<span v-for="answer in item.answer">{{answer}}</span>
															</div>
														</li>
														<li class="clear">
															<span>统计</span>
															<div>
																本题共被作答{{item.question_info.answer_count}}次，正确率为{{item.question_info.true_probability}}%
															</div>
														</li>
														<li class="i_analysis clear">
															<span>解析</span>
															<template v-if="item.pattern == 1">
																<div v-html="item.resolve"></div>
															</template>
															<template v-if="item.pattern == 2">
																<div>
																	<img :src="BASE_URL + item.resolve_path">
																</div>
															</template>
														</li>
													</ul>
													<i slot="reference">查看解析</i>
												</el-popover>
											</div>
										</div>
									</el-form-item>
								</li>
							</template>
						</ul>
					</div>

				</el-form>
			</div>
		</div>

	</div>
</template>


<script>

	import { VueEditor } from 'vue2-editor'
	
	export default{
		components: {
			VueEditor
		},
		data() {
			return {
				ruleForm:{
					answer:[],
					score: [],
					comment: []
				},
				list: [],
				testList: {
					name: '', //标题
					time: '', //用时 
					score: 0, //得分 
					test_id: '',
					train_id: '',
					question_list: [], //试题内容
					question_type: [], //试题题型
					marks: null, //满分
					list: []
				},

				content: '<h1>Html For Editor</h1>',
				customToolbar: [
    		        [{ list: "ordered" }, { list: "bullet" }],
    		        [{ 'color': [] }, { 'background': [] }], 
    		        ['clean']
	    		],

	    		train_id: this.$route.query.trainid,
	    		train_little_id: this.$route.query.train_little_id,
	    		test_id: this.$route.query.test_id,
	    		record_id: this.$route.query.record_id,
	    		user_id: this.$route.query.user_id,
	    		create_id: this.$route.query.create_id
			}
		},
		created(){
			this.get_testList()

		},
		methods: {
		
			goback() {
				this.$router.back(-1);
			},
			getSortFun(order, sortBy) {
				var ordAlpah = (order == 'asc') ? '>' : '<';
				var sortFun = new Function('a', 'b', 'return a.' + sortBy + ordAlpah + 'b.' + sortBy + '?1:-1');
				return sortFun;
			},
			//试卷列表
			get_testList() {
			    //   this.ruleForm.sub_data = deep_clone(this.subAlbumData);
			    let success = res => {

			    	this.testList.name = res.data.test_name
			    	this.testList.test_id =   res.data.test_id
			    	this.testList.train_id = res.data.train_id;
			    	this.testList.question_list = res.data.question_list;
			    	this.testList.question_type = res.data.question_type;
			    	
			    	this.testList.question_type.forEach(item=>{
			    		this.testList.marks += parseInt(item.score)
			    	})

			    	this.testList.question_list.sort(this.getSortFun('asc', 'qt_id'));
			    	this.testList.scores = 0;
			    	for (let i = 0; i < this.testList.question_list.length; i++) {
			    		let _this = this.testList.question_list[i];
			    		this.list[_this.id] = {
			    			id: _this.id,
							answer: _this.user_answer,
							score: _this.user_score,
							comment: _this.teacher_comment,
							type: _this.qt_id,
						}
			    		let answer_flag = false;

			    		if (_this.qt_id == 1 || _this.qt_id == 2) {
			    			let answer = _this.answer.join();

			    			let user_answer = _this.user_answer.join();
			    			if(answer == user_answer ) {
			    				answer_flag = true;
								this.testList.scores += _this.score;
								this.list[_this.id] = Object.assign({},this.list[_this.id],{
									id: _this.id,
									score: _this.score,
								})
			    			}
			    		}
			    	}

			    };

			    let params = {
			    	create_id: this.create_id,
			    	user_id: this.user_id,
			    	record_id: this.record_id
			    }

			    let fail = (data => {this.$message.error(data.msg);});

			    this.$ajax.get("api/test/get_t_test_detail_data", {
			    	params: params,
			    	func: { success: success, fail: fail }
			    });
			},
			//保存阅卷结果
			saveTest(){
				this.$confirm('确认要提交试卷吗, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
					customClass: 'confirm-them',
				}).then(() => {
					this.submitJob = false;
					let success = (res =>{
						this.$message.success(res.msg);

						setTimeout( () => {
							this.$router.push({path: '/train/test-see', query: {record_id:this.record_id, train_little_id:this.train_little_id,
								user_id: this.user_id, create_id: this.create_id}})
						}, 1000);
					})
					let params = {
						record_id: this.record_id,
						train_little_id: this.train_little_id,
						send_and_save_flag: '1',
						mark: this.list,

					}
					// console.info(this.ruleForm)

					this.$ajax.post('api/test/save_mark_test_detail',params,{func: {success: success}});
				}).catch(() => {});
			}
		}
	}
</script>